<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
	<% String path=request.getContextPath(); String basePath=request.getScheme() + "://" + request.getServerName() + ":"
		+ request.getServerPort() + path + "/" ; %>

		<!DOCTYPE html>
		<html>

		<head>
			<base href="<%=basePath%>">

			<title>思派工程签证打印</title>

			<meta http-equiv="pragma" content="no-cache">
			<meta http-equiv="cache-control" content="no-cache">
			<meta http-equiv="expires" content="0">
			<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
			<meta http-equiv="description" content="This is my page">
			<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

		</head>

		<body style="text-align:center">
			<%@ include file="/WEB-INF/jsp/common/headerSupply.jsp" %>
				<%@ include file="/WEB-INF/jsp/common/loadDiv.jsp" %>

					<script type="text/javascript">
						$(function () {
							var id = getQueryVariable('id');
							initInfo(id);
						});

						//获取访问参数id
						function getQueryVariable(variable) {
							var query = window.location.search.substring(1);
							var vars = query.split("&");
							for (var i = 0; i < vars.length; i++) {
								var pair = vars[i].split("=");
								if (pair[0] == variable) {
									return pair[1];
								}
							}
							return (false);
						}

						function initInfo(id) {
							$.ajax({
								type: "get",
								url: "con/visa/selectInfor?visId=" + id,
								success: function (data) {
									if (data.code == 60200) {
										var result = data.data;
										$('title').html(result.visName);
										$('#visConName').html(result.visConName);
										$('#oaCode').html(result.oaCode);
										$('#visName').html(result.visName);
										$('#deptName').html(result.deptName);
										$('#visConDate').html(result.visConDate);
										$('#visDetail').html(result.visDetail);
										$('#visProxy').html(result.visProxy);
										$('#visDeptCharge').html(result.visDeptCharge);
										$('#visLeader').html(result.visLeader);
										$('#visAudit').html(result.visAudit);
										$('#visRelativeFlow').html(result.visRelativeFlow);
										getFileList(id)
									} else {
										$.messager.alert('提示', data.msg);
									}
								},
								error: function (XMLHttpRequest, textStatus, errorThrown) {
									$.messager.alert('消息', errorThrown);
								}
							});
						}
					</script>

					<script type="text/javascript">
						var selectedFileList = [];//已选文件列表
						var succsessCount = 0;//上传成功文件个数
						var errorCount = 0;//上传失败文件个数
						/************文件处理部分*************/


						/**
						 *文件框改变事件
						 */
						function changeFile() {
							var files = $("#uploadpicker").prop("files");
							$
								.each(
									files,
									function (index, item) {
										let choiseFile = $("#checkfileList>li");
										if (choiseFile.length > 0) {//文件去重
											let count = 0;
											$.each(choiseFile, function (index1, item1) {
												if (item.name == item1.innerText) {
													count++;
												}
											});
											if (count == 0) {
												if (checkFileLength(item.size)) {
													if (item.name.includes('#') ||item.name.includes('/') ||item.name.includes('&') || item.name.includes('\\') || item.name.includes(' ')) {
														alert('文件名不能包含&、斜杠、反斜杠、空格等特殊字符！');
														return;
													}
													$("#checkfileList")
														.append(
															"<li class=\"fileinfo\">"
															+ item.name
															+ "<a style=\"display: none; color: red; margin-left: 10px;\" href=\"javascript:void(0)\" onclick=\"RemoveFile(this,'"
															+ item.name
															+ "')\">删除</a>"
															+ "</li>");
													selectedFileList.push(item);
													AddMoushover();
												}
											}
										} else {
											if (checkFileLength(item.size)) {
												if (item.name.includes('#') ||item.name.includes('/') ||item.name.includes('&') || item.name.includes('\\') || item.name.includes(' ')) {
													alert('文件名不能包含&、斜杠、反斜杠、空格等特殊字符！');
													return;
												}
												$("#checkfileList")
													.append(
														"<li class=\"fileinfo\">"
														+ item.name
														+ "<a style=\"display: none; color: red; margin-left: 10px;\" href=\"javascript:void(0)\" onclick=\"RemoveFile(this,'"
														+ item.name
														+ "')\">删除</a>"
														+ "</li>");
												selectedFileList.push(item);
												AddMoushover();
											}
										}
									});
						}

						/**
						 *    判断文件是否超过限制大小
						 * @param fileLen
						 * @returns {boolean}
						 */
						function checkFileLength(fileLen) {
							if (fileLen > 102400000) {
								$.messager.alert("提示", "上传文件大小不能超过100M", "error");
								return false;
							}
							return true;
						}

						/**
						 * //添加鼠标经过事件，鼠标划过时显示“删除”
						 * @constructor
						 */
						function AddMoushover() {
							$(".fileinfo").hover(function () {
								$(this).find("a").last().css("display", "");
							}, function () {
								$(this).find("a").last().css("display", "none");
							});
						}

						/**
						 *  移除已选择的文件
						 */

						function RemoveFile(obj, fileId) {
							$.messager.confirm("提示", "确认删除当前文件?", function (e) {
								if (e) {
									let index = $("#checkfileList>li").index($(obj).parent());
									selectedFileList.splice(index, 1);
									$(obj).parent().remove();

									$.ajax({
										type: "post",
										url: 'file/deleteFile?fileId=' + fileId,
										success: function (data) {
											$.messager.alert('消息', data);
										},
										error: function (XMLHttpRequest, textStatus,
											errorThrown) {
											$.messager.alert('消息', errorThrown);
										}
									});

								}
							});
						}

						/**
						 * 取得该条数据所属的文件列表
						 * @param row
						 */
						function getFileList(id) {
							$.ajax({
								type: "post",
								url: "file/getFileList",
								data: {
									fileTable: "con_visa",
									fileRow: id
								},
								success: function (data) {
									const dataArray = eval(data);
									initFile(dataArray);
								},
								error: function (XMLHttpRequest, textStatus, errorThrown) {
									$.messager.alert('消息', errorThrown);
								}
							});
						}

						/**
						 * 初始化该条数据的文件列表
						 * @param dataArray
						 */
						function initFile(dataArray) {
							$("#checkfileList").empty();
							// 			sselectedFileNameList = [];
							selectedFileList = [];
							dataArray
								.forEach(function (e, i, a) {
									$("#checkfileList")
										.append(
											"<li style=\"text-align:left;\" class=\"fileinfo\">"
											+ e.FILE_NAME
											+ "</li>");
									// 						sselectedFileNameList.push(e.FILE_NAME);
									// AddMoushover();
								});
						}

						// 文件下载
						function downloadFile(fileName, fileRow) {
							let url = 'api/file/download?id=' + fileRow
							let xhr = new XMLHttpRequest()
							xhr.open('GET', url, true)
							xhr.setRequestHeader('token', localStorage.getItem('tokenSupply'));
							xhr.setRequestHeader('userType', localStorage.getItem('userType'));
							xhr.responseType = 'blob'
							xhr.onload = function (data) {
								if (this.status == 200) {
									let blob = this.response
									let reader = new FileReader()
									reader.readAsDataURL(blob)
									reader.onload = function (e) {
										let a = document.createElement('a')
										a.download = fileName
										a.href = e.target.result
										$('body').append(a)
										a.click()
										$(a).remove()
									}
								} else {

								}
							}
							xhr.send()
						}
					</script>


					<style scoped="scoped">
						.table td {
							border: 1px solid grey;
						}

						.table {
							border-collapse: collapse;
							/* 							text-align: center; */
							width: 900px;
						}

						.div-in-center {
							margin: 0 auto;
							width: 900px;
							/* 							position: absolute; */
							/* 							 left:50%; */
							/*             top:50%; */
							/*             margin-left:-500px; */
							/*             margin-top:-100px; */
							/* 							top: 150px; */
							/* 							left: 50%; */
							/* 							-webkit-transform: translate(-50%, -50%); */
							/* 							-moz-transform: translate(-50%, -50%); */
							/* 							-ms-transform: translate(-50%, -50%); */
							/* 							-o-transform: translate(-50%, -50%); */
							/* 							transform: translate(-50%, -50%); */
						}

						.div-title-center {
							position: absolute;
							top: 50%;
							left: 50%;
							-webkit-transform: translate(-50%, -50%);
							-moz-transform: translate(-50%, -50%);
							-ms-transform: translate(-50%, -50%);
							-o-transform: translate(-50%, -50%);
							transform: translate(-50%, -50%);
						}

						span {
							word-break: normal;
							width: auto;
							display: block;
							white-space: pre-wrap;
							word-wrap: break-word;
							overflow: hidden;
							text-align: left;
						}
					</style>
					<div class="div-in-center">
						<table style="width: 900px;text-align: center;">
							<tr>
								<td>工程签证</td>
							</tr>
						</table>
						<table>
							<tr>
								<td style="width: 600px;">
									<table>
										<tr>
											<td>施工单位：</td>
											<td><span id="visConName"></span></td>
										</tr>
									</table>
								</td>
								<td>
									<table>
										<tr>
											<td>编号：</td>
											<td><span id="oaCode"></span></td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
						<table class="table">
							<tr>
								<td style="width:150px;">
									<div class="ssec-label">标题：</div>
								</td>
								<td colspan="3">
									<div class="ssec-text normal">
										<span id="visName" name="visName" />
									</div>
							</tr>
							<tr>
								<td style="width:150px;">
									<div class="ssec-label">所属部门：</div>
								</td>
								<td style="width: 300px">
									<div class="ssec-text normal">
										<span id="deptName" name="deptName" />
									</div>
								</td>
								<td style="width:150px;">
									<div class="ssec-label">完工日期：</div>
								</td>
								<td>
									<div class="ssec-text normal">
										<span name="visConDate" id="visConDate">
									</div>
								</td>
							</tr>
							<tr>
								<td style="width:150px;">
									<div class="ssec-label">现场代表：</div>
								</td>
								<td style="width: 300px">
									<div class="ssec-text normal">
										<span id="visProxy" name="visProxy" />
									</div>
								</td>
								<td style="width:150px;">
									<div class="ssec-label">部门负责人：</div>
								</td>
								<td>
									<div class="ssec-text normal">
										<span name="visDeptCharge" id="visDeptCharge">
									</div>
								</td>
							</tr>
							<tr>
								<td style="width:150px;">
									<div class="ssec-label">分管领导：</div>
								</td>
								<td style="width: 300px">
									<div class="ssec-text normal">
										<span id="visLeader" name="visLeader" />
									</div>
								</td>
								<td style="width:150px;">
									<div class="ssec-label">审计部：</div>
								</td>
								<td>
									<div class="ssec-text normal">
										<span name="visAudit" id="visAudit">
									</div>
								</td>
							</tr>
							<tr>
								<td>相关附件
								</td>
								<td colspan="3">
									<ul id="checkfileList"></ul>
								</td>
							</tr>
							<tr>
								<td>相关流程
								</td>
								<td colspan="3">
									<span name="visRelativeFlow" id="visRelativeFlow">
								</td>
							</tr>
							<tr>
								<td>
									<div class="ssec-label">工程内容：</div>
								</td>
								<td colspan="3" style="height:900px;">
									<div class="ssec-label" >
										<span id="visDetail" name="visDetail" >
									</div>
								</td>
							</tr>
							<!-- <tr>
										<td>
											<div class="ssec-label">属地公司代码：</div>
										</td>
										<td>
											<div class="ssec-text normal">
												<input id="visFactoryCode" name="visFactoryCode" class="easyui-textbox"
													data-options="required:true" />
											</div>
										</td>
									</tr> -->
							<!-- <tr>
										<td>
											<div class="ssec-label">属地公司名称：</div>
										</td>
										<td>
											<div class="ssec-text normal">
												<input id="visFactoryName" name="visFactoryName" class="easyui-textbox"
													data-options="required:true" />
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="ssec-label">所属部门：</div>
										</td>
										<td>
											<div class="ssec-text normal">
												<input id="deptId" name="deptId" class="easyui-textbox"
													data-options="required:true" />
											</div>
										</td>
									</tr> -->
							<!-- <tr>
										<td>
											<div class="ssec-label">所属部门名称：</div>
										</td>
										<td>
											<div class="ssec-text normal">
												<input id="deptName" name="deptName" class="easyui-textbox"
													data-options="required:true" />
											</div>
										</td>
									</tr> -->
							<!-- <tr>
										<td>
											<div class="ssec-label">备注：</div>
										</td>
										<td>
											<div class="ssec-text normal">
												<input id="remark" name="remark" class="easyui-textbox"
													data-options="required:true" />
											</div>
										</td>
									</tr> -->
						</table>
						<table>
							<tr>
								<td style="width: 600px;">
									<table>
										<tr>
											<td>建设单位（签章）：</td>
											<td></td>
										</tr>
									</table>
								</td>
								<td>
									<table>
										<tr>
											<td>施工单位（签章）:</td>
											<td></td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
						<!-- <div style="padding: 5px; text-align: right;">
									<a class="easyui-linkbutton" onclick="save();" iconcls="icon-save">保存</a>
								</div> -->
					</div>
		</body>

		</html>